<template>
  <div class="history-view">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>聊天历史记录</span>
          <el-button @click="$router.back()" type="primary" :icon="ArrowLeft">
            返回聊天
          </el-button>
        </div>
      </template>
      
      <el-empty v-if="!chatLogs.length" description="暂无聊天记录" />
      
      <div v-else>
        <div v-for="log in chatLogs" :key="log.id" class="chat-log-item">
          <el-card shadow="hover">
            <div class="log-header">
              <el-text type="primary">{{ log.userQuestion }}</el-text>
              <el-tag :type="log.executionStatus === 'SUCCESS' ? 'success' : 'danger'" size="small">
                {{ log.executionStatus }}
              </el-tag>
            </div>
            
            <div class="log-content">
              <el-text>{{ log.aiResponse }}</el-text>
            </div>
            
            <div class="log-footer">
              <el-text size="small" type="info">
                {{ dayjs(log.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
              </el-text>
            </div>
          </el-card>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'
import { chatApi } from '@/api'
import { useChatStore } from '@/stores/chat'
import dayjs from 'dayjs'
import type { ChatLog } from '@/types'

const chatStore = useChatStore()
const chatLogs = ref<ChatLog[]>([])

onMounted(async () => {
  try {
    chatLogs.value = await chatApi.getRecentChats(50)
  } catch (error) {
    console.error('加载聊天历史失败:', error)
  }
})
</script>

<style scoped>
.history-view {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-log-item {
  margin-bottom: 16px;
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.log-content {
  margin-bottom: 12px;
}

.log-footer {
  text-align: right;
}
</style>